<template>
  <!--留言板按钮-->
  <div class="message_page">
    <!--点击咨询-->
    <button type="button" class="message_open_btn"></button>
    <!--留言板表单-->
    <div class="message_form_page font_14 col_666 text-left">
      <div class="text-right"><button type="button" class="close_message_btn"></button></div>
      <p>联系我们</p>
      <p>请拨打咨询热线</p>
      <p class="col_333 font_24 margin_top_10">021-67680297</p>
      <!--留言板没提交状态-->
      <div class="message_open_box border_top_E7E9EE" v-if="message_submit">
        <p class="margin_top_20">或者填写您的联系方式，我们会主动与您联系：</p>
        <input type="text" class="message_board_inp" id="user_name_inp" placeholder="称呼" maxlength="10">
        <input type="number" class="message_board_inp" id="user_phone_inp" placeholder="手机号">
        <div class="message_qrcode_box">
          <input type="number" id="message_qrcode_inp" placeholder="短信验证码">
          <button type="button" class="message_qrcode_btn font_12 bg_2577EF col_fff"
                  @click="message_qrcode_btn($event)">获取验证码
          </button>
        </div>
        <textarea class="message_textarea" id="textarea_content" placeholder="请输入咨询内容" maxlength="140"></textarea>
        <button type="button" class="sub_message_form bg_2577EF col_fff" @click="sub_message_board">提交</button>
      </div>
      <!--留言板提交状态-->
      <div class="message_close_box border_top_E7E9EE text-left" v-else>
        <div class="message_succ_img margin_top_30 "><img src="http://image.xuemei99.com/ok_icon_home.png" alt=""></div>
        <p class="col_2577EF margin_top_30 font_14">感谢您的关注</p>
        <p class="col_666 font_14 margin_top_10">我们已收到您的咨询信息，客服将会在24小时内联系您。</p>
        <button type="button" class="sub_message_form bg_fff col_666 border_999" @click="back_message_board">返回</button>
      </div>
    </div>
  </div>
</template>

<script>
  //每个子组价都需要抛出
  export default{
    name: "message",
    methods: {
      /**
       * 短信验证码请求
       * **/
      message_qrcode_btn(e){
          let obj = window.event || e;
          let event_target = obj.target || obj.srcElement;
        let that = this;
        let countdown = 60;
        let user_phone_inp = $("#user_phone_inp").val();
        /**
         * 请求验证码
         * **/
        that.base.ajax_post('/site/get/mobile/msg/code',{"phone":user_phone_inp}, function (data) {
          if (data.status == 0) {
            /**
             * 请求成功，倒计时开始
             * **/
            settime(obj);
            function settime() {
              if (countdown == 0) {
                $(event_target).attr("disabled", false).text("获取验证码").removeClass("bg_B1B3B5").addClass("bg_2577EF");
                //按钮失效
                $(event_target).attr("disabled", false);
                countdown = 60;
                return;
              } else {
                $(event_target).attr("disabled", true).text(countdown + "s").removeClass("bg_2577EF").addClass("bg_B1B3B5");
                countdown--;
              }
              setTimeout(function () {
                settime(obj)
              }, 1000)
            }
          } else {
            alert(data.detail)
          }
        });
      },

      /**
       * 提交留言板数据
       * checkStringNull ：非空校验
       * 如果表单合法，则请求数据
       * **/
      sub_message_board(){
        let that = this;
        let user_name = $("#user_name_inp").val();
        let user_phone = $("#user_phone_inp").val();
        let message_qrcode = $("#message_qrcode_inp").val();
        let textarea_content = $("#textarea_content").val();
        if (that.checkStringNull(user_name) == false && that.checkStringNull(user_phone) == false && that.checkStringNull(message_qrcode) == false && that.checkStringNull(textarea_content) == false) {
          that.base.ajax_post("/site/consult", {"name":user_name,"phone":user_phone,"code":message_qrcode,"content":textarea_content}, function (data) {
            if (data.status == 0) {
              that.message_submit = false;
            } else {
              alert(data.detail);
            }
          })
        } else {
          alert("请完善信息再提交")
        }
      },

      /**
       * 返回留言板
       * **/
      back_message_board(){
        this.message_submit = true
      }
    },

    /**
     * 初始数据
     * message_submit ：判断显示留言板提交是否成功
     * **/
    data () {
      return {
          "show_message":false,
          "message_submit":true
      }
    },
    //在模板渲染之后调用
    mounted () {
      let that = this;
      /**
       * 点击关闭留言板
       * **/
      $(".close_message_btn").click(function () {
          $(".message_form_page").stop().animate({right: -280}, 500);
        $(".message_open_btn").show(500)
      });

      /**
       * 点击打开留言板
       * **/
      $(".message_open_btn").click(function () {
        $(".message_open_btn").hide(500);
        $(".message_form_page").stop().animate({right: 0}, 500);
      })
    }
  }
</script>

<style scoped>
  .message_page{
    height: 100%;
  }
  .message_open_btn{
    position: fixed;
    bottom: 80px;
    right: 40px;
    z-index: 9999;
    width: 80px;
    height: 80px;
    background: url("http://image.xuemei99.com/message_icon_home.png") no-repeat center;
    background-size: cover;
  }
  .message_form_page{
    position: fixed;
    right: -280px;
    top: 0;
    z-index: 998;
    box-shadow: -2px 0px 4px rgba(0,0,0,.1);
    width: 280px;
    height: 100%;
    background-color: #ffffff;
    padding: 80px 36px 0px 36px;
  }
  .close_message_btn{
    width: 30px;
    height: 30px;
    background: url("http://image.xuemei99.com/close_icon_home.png") no-repeat center;
    background-size: cover;
  }
  .message_board_inp{
    width: 100%;
    height: 36px;
    border: 1px solid #999999;
    margin-top: 12px;
    padding: 5px;
  }
  .message_qrcode_box{
    margin-top: 10px;
  }
  .message_qrcode_box input{
    width: calc(100% - 85px);
    height: 36px;
    border-bottom: 1px solid #999999;
    border-left: 1px solid #999999;
    border-top: 1px solid #999999;
    padding: 5px;
    vertical-align: top;
    margin-right: -5px;
  }
  .message_qrcode_btn{
    width: 80px;
    height: 36px;
  }
  .message_textarea{
    width: 100%;
    height: 100px;
    border: 1px solid #999999;
    padding: 5px;
    margin-top: 12px;
   }
  .sub_message_form{
    width: 100%;
    height: 36px;
    margin-top: 20px;
    border-radius: 2px;
  }
  .message_succ_img img{
    width: 50px;
    height: 50px;
  }
</style>
